import React, { FC, useEffect, useState } from "react";
import { Select } from "antd";
import Https from "@/utils/Https";
import debounce from "lodash/debounce";
interface propType {
  onSuccess: (e) => void; //上传成功的回调事件
  val: string | number;
}
const SelectUserPhone: FC<propType> = (props) => {
  const { val } = props;
  const { onSuccess } = props;
  const [data, setData] = useState([]);
  const getUserList = async (tel) => {
    let obj = {
      tel,
      current: 1,
      pageSize: 50,
    };
    let res: any = await Https.post("/wechatuser/infoList", obj);
    let objList: any = [];
    if (res && res.records && res.records.length > 0) {
      res.records.map((item) => {
        objList.push({ ...item, disabled: item.tel == val });
      });
      setData(objList);
    } else {
      setData([]);
    }
  };
  const handleSearch = debounce(function (value) {
    getUserList(value);
  }, 1000);
  useEffect(() => {
    getUserList("");
  }, []);
  return (
    <Select
      onChange={(e) => {
        let userObj = data.filter(function (o) {
          return o.id == e;
        })[0];
        console.log(userObj, "-userObj");
        onSuccess(userObj);
      }}
      onSearch={handleSearch}
      showSearch={true}
      filterOption={false}
      placeholder="请选择"
    >
      {data &&
        data.map(
          (e: {
            id: string;
            tel: string;
            nickName: string;
            disabled: boolean;
          }) => (
            <Select.Option key={e.id} value={e.id} disabled={e.disabled}>
              {e.nickName + "(" + e.tel + ")"}
            </Select.Option>
          )
        )}
    </Select>
  );
};

export default SelectUserPhone;
